<template>

    <el-form  :model="form" label-width="100px">

      <el-form-item label="学号">
        <el-input  v-model="stu_id"  style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="name"  style="width: 500px;"></el-input>
      </el-form-item>

      <el-form-item label="性别">
      <el-radio-group v-model="gender" style="width: 500px;">
        <el-radio value="M">男</el-radio>
        <el-radio value="F">女</el-radio>
      </el-radio-group>
    </el-form-item>

      <el-form-item label="身份证号">
        <el-input  v-model="id_card" style="width: 500px;"></el-input>
      </el-form-item>

    <el-form-item label="班级">
        <el-select v-model="_class" placeholder="请选择" style="width: 200px;">
          <el-option v-for="item in options1" :key="item.lable" :label="item.value" :value="item.lable">
          </el-option>
        </el-select>
    </el-form-item>

      <el-form-item>
      <el-button type="primary" @click="updateData">修改</el-button>
      <el-button type="primary" @click="addData()">添加</el-button>
    </el-form-item>
    </el-form>
    
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import axios from 'axios';
import { useRouter} from 'vue-router';
import { useRoute} from 'vue-router';
const router =useRouter()
    
let name=ref('')
let gender=ref('')
let stu_id=ref('')
let id_card=ref('')
let _class=ref('')
let updateId=ref('')

var options1=ref([])
// 班级下拉菜单数据
function select(){
  axios.get("http://localhost:8000/student/get_select/")
  .then(res => {
    options1.value=res.data.data
    console.log(options1.value);
    
    console.log(res)
  })
  .catch(err => {
    console.error(err); 
  })
}


//新增数据提交表单对象
let form = ref({
name: name,
gender: gender,
student_id: stu_id,
id_card: id_card,
_class_id: _class
});

  //添加学生信息
function addData(){
  console.log(form.value);
   axios.post('http://localhost:8000/student/add_student/',form.value)
   .then(res => {
    
    console.log(res)
    router.push('students');
   })
   .catch(err => {
    console.error(err); 
   })
 }

  //修改学生信息
function updateData(){
   axios.post('http://localhost:8000/student/updata_student/',form.value)
   .then(res => {
    console.log(res)
    router.push('students');
   })
   .catch(err => {
    console.error(err); 
   })
 }

// 显示修改数据
  function search() {
         
    axios.get('http://localhost:8000/student/get_putdata/?student_id=' + updateId.value)
      .then(response => {
            console.log(response);

            name.value= response.data.data.name,
            gender.value= response.data.data.gender,
            stu_id.value= response.data.data.student_id,
            id_card.value= response.data.data.id_card,
            _class.value= response.data.data.class_id
      })
      .catch(error => {
        console.error("Error fetching data:", error); // 请求失败时打印错误信息
      });
  }

const message = ref('Hello, Vue 3!');
onMounted(() => {
    select()
    // name.value= ''  
    // gender.value= ''
    // stu_id.value= ''
    // id_card.value= ''
    // _class.value= ''
    const route = useRoute();
    updateId.value=route.params.id
    console.log(updateId.value);
    search()
    

});

// 在组件卸载前执行的操作
onUnmounted(() => {
    // Your code here
});
</script>